<template>
	<div class="sidebar" @mouseover="mouseOver" @mouseleave="mouseLeave">
		<el-menu class="sidebar-el-menu" :default-active="onRoutes" @select="handleSelectMenu" :collapse="collapse"
			background-color="rgba(2, 16, 51)" text-color="#bfcbd9" active-text-color="#ffbb00" unique-opened>
			<v-menuTree :menuData="menuData" :collapse="collapse"></v-menuTree>
		</el-menu>
	</div>
</template>

<script>
	import bus from 'common/bus.js';
	import tabItems from 'common/tabItems.js';
	import vMenuTree from 'common/MenuTree.vue';
	import menuData from 'common/menuData.js';
	

	export default {
		name: 'GlobalSidebar',
		components: {
			vMenuTree
		},
		data() {
			return {
				tabItems: tabItems,
				menuData: menuData
			}
		},
		computed: {
			onRoutes() {
				return this.$route.meta.menu;
			},
			itemsFn() {
				let _role = localStorage.getItem('ms_role');
				return this.items.filter((item) => {
					if (item.role === 0) {
						return item;
					} else if (item.role === 1 && _role === '管理员') {
						return item;
					}
				});
			},
			collapse() {
				return this.$store.getters.getCollapse;
			}
		},
		created() {},
		methods: {
			handleSelectMenu(index, indexPath) {
				// console.log(index,indexPath)
				// console.log(this.tabItems)
				let goIndex = index;
				if (this.tabItems.hasOwnProperty(index)) {
					goIndex = this.tabItems[index][0].name;
				}
				if (index != this.$route.meta.menu) {
					this.$router.push({
						name: goIndex
					});
				}
			},
			mouseOver() {

			},
			mouseLeave() {

			}
		},
	}
</script>

<style scoped>
	.sidebar {
		display: block;
		position: absolute;
		left: 0;
		top: 50px;
		bottom: 0;
		overflow-y: scroll;
		box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.8);
		z-index: 8;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}

	.sidebar::-webkit-scrollbar {
		width: 0;
	}

	.sidebar-el-menu {
		border-right: 0;
	}

	.sidebar-el-menu:not(.el-menu--collapse) {
		width: 200px;
	}

	.sidebar>ul {
		height: 100%;
	}
</style>
